<template>
	<el-card>
		<div slot="header">
			<span>用户列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" prop="user_id" width="30">
			</el-table-column>
			<el-table-column prop="username" label="用户名">
			</el-table-column>
			<el-table-column prop="nickname" label="昵称">
			</el-table-column>
			<el-table-column prop="sex" label="性别">
			</el-table-column>
			<el-table-column prop="tel" label="手机">
			</el-table-column>
			<el-table-column prop="usable" label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.usable === 1" type="success">正常</el-tag>
					<el-tag v-else type="warning">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-permission="'user:list:switch'" @click="handleChange(scope.row.usable, scope.row.user_id, scope.$index)"
						icon="el-icon-edit">{{ scope.row.usable === 0 ? '启用' : '禁用' }}</el-button>
					<el-button v-permission="'user:list:remove'" type="danger" @click="handleRemove(scope.row.user_id, scope.$index)" plain
						icon="el-icon-delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
import { User } from '@/api';
export default {
	data() {
		return {
			tableData: [],
		}
	},
	created() {
		this.loadList();
	},
	methods: {
		// 加载列表
		async loadList() {
			let { status, msg, data } = await User.list({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
		handleChange(usable, user_id, index) {
			if (usable === 1) {
				this.$confirm('此操作将禁用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let unusable = 0;
						let { status, msg } = await User.usable({ usable: unusable, user_id });
						if (status) {
							this.tableData[index].usable = unusable;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
			if (usable === 0) {
				this.$confirm('此操作将启用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let unusable = 1
						let { status, msg } = await User.usable({ usable: unusable, user_id });
						if (status) {
							this.tableData[index].usable = unusable;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
		},
		handleRemove(user_id, index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					//删除标签
					let { status, msg } = await User.remove({ user_id });
					if (status) {
						//操作DOM
						this.tableData.splice(index, 1);
						//信息提示
						this.$message.success(msg);
					} else {
						//信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除');
				});
		},
	},

}
</script>

<style></style>
